<template>
  <div style="margin-left: 14%">
    <!-- 设备状态检测页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>试验数据统计
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
        <div style="height:32px; margin-bottom:10px">
            <el-date-picker
            v-model="value"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            unlink-panels
            size="small"
            @change="change"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <el-card class="box-card" style="margin-top: 17px">
            <el-row>
                <el-col :span="8"><div style="height: 150px; margin: 0 50px; padding-top: 50px; text-align: center;"><div>工频累计接入次数</div><span style="font-size: 32px; color: #6766E6;">{{gpTestTimes}} <span>&nbsp;次</span></span></div></el-col>
                <el-col :span="8"><div style="height: 150px; margin: 0 50px; padding-top: 50px; text-align: center;"><div>冲击累计接入次数</div><span style="font-size: 32px; color: #60D99F;">{{ldTestTimes}} <span>&nbsp;次</span></span></div></el-col>
                <el-col :span="8"><div style="height: 150px; margin: 0 50px; padding-top: 50px; text-align: center;"><div>冲击分压器累计接入次数</div><span style="font-size: 32px; color: #F65D6E;">{{fyTestTimes}} <span>&nbsp;次</span></span></div></el-col>
            </el-row>
        </el-card>
        <el-card class="box-card" style="margin: 15px 0">
            <div slot="header" class="clearfix">
                <span>设备累计使用时间及次数统计</span>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                style="width: 100%">
                <el-table-column
                    prop="press_ground"
                    label="加压接地位置" align="center">
                </el-table-column>
                <el-table-column
                    prop="gp_count"
                    label="工频累计施加次数" align="center">
                </el-table-column>
                <el-table-column
                    prop="duration"
                    label="工频累计施加时间（h）" align="center">
                </el-table-column>
                <el-table-column
                    prop="ld_count"
                    label="冲击累计施加次数" align="center">
                </el-table-column>
            </el-table>
            <el-pagination
                layout="prev, pager, next"
                :total="tableData.length" :page-size="pageSize" :current-page.sync="currentPage" background hide-on-single-page @current-change="currentChange">
            </el-pagination>
        </el-card>
        <el-card class="box-card" style="margin: 0 0 15px 0">
            <div slot="header" class="clearfix">
                <span>开关动作次数统计</span>
            </div>
            <ve-histogram height="340px" :data="chartData" :extend="chartSettings"></ve-histogram>
        </el-card>
        <div style="font-size: 14px; margin-bottom: 15px; height: 32px; line-height: 32px; border-left: 9px solid #6C59DD; padding-left: 15px; color: #6C59DD;">试验数据分析</div>
        <el-card class="box-card">
            <div slot="header">
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="item.type" :name="item.type" v-for="(item, index) in data" :key="index" lazy>
                        <div  v-for="(item1,index1) in item.data" :key="index1">
                        <div style="border-bottom: 1px solid #F2F2F2; padding-bottom: 5px;  color: #6C59DD;">{{item1.columns[1]}}</div>
                        <ve-line height="360px" :data="item1" :extend="chartSetting" :mark-line="markLine" :mark-point="markPoint"></ve-line>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
    </div>
  </div>
</template>

<script>
// import 'v-charts/lib/component/markLine'
// import 'v-charts/lib/component/markPoint'
import dayjs from 'dayjs'
import Bus from '../../public/eventBus'
export default {
    data() {
        return {
            gpTestTimes: 0, //工频接入次数
            ldTestTimes: 0,//雷电接入次数 
            fyTestTimes: 0,//冲击分压器接入次数
            pageSize: 5,
            currentPage: 1,
            tableData: [],
            markLine: { // 平均值
                data: [{
                    type: 'average',
                    name: '平均值',
                    label: {
                    show: 'true',
                    position: 'insideEndTop',
                    color: '#5470C6',
                    fontSize: 15
                },
                },
                
                ]
            },
            markPoint: {
                data: [{
                        type: 'max',
                        name: '最大值',
                        itemStyle: {
                            color: '#5470C6',
                        }
                    },
                    {
                        type: 'min',
                        name: '最小值',
                        itemStyle: {
                            color: '#5470C6',
                        }
                    },
                ]
            },
            chartSetting: {
                itemStyle: { // 远点颜色
                    color: "#5470C6"
                },
                dataZoom: [{  // 可缩放
                }, {
                type: 'inside'
                }],
                lineStyle:{ // 折线颜色
                    color:'#5470C6'
                },
                legend:{ // 标识
                    show:false,
                },
                xAxis:{
                    boundaryGap: false, // 从x轴原点开始
                    axisLine:{
                        show:true, // 显示x轴
                    },
                    axisTick:{
                        show:true, // x轴每项的小竖线
                        alignWithLabel: true // x轴中间显示还是小竖线显示
                    },
                // axisLabel: {
                //     margin: 15,//距离
                //     interval: 0,
                //     rotate: 30,//倾斜度
                //     },
                    triggerEvent: true
                }
            },
            chartSettings: {
                // boundaryGap: false, // 从x轴原点开始
                series:{
                    type: 'bar',
                    itemStyle: {  // 柱状图柱子圆角边框
                        barBorderRadius: [20,20,0,0]    
                    },
              barWidth: 15
                },
                chartColor: ['#7A7AF6','#8DE4B9'],
                legend:{
                    show:true,
                    right: 0,
                    itemHeight: 15,
                    itemWidth: 15,
                    icon: 'circle'
                    },
                yAxis:{
                axisLine:{
                    show:false,
                },
                },
                xAxis:{
                axisLine:{
                    show:true,
                },
                axisTick:{
                        show:true,
                        alignWithLabel: false
                },
                axisLabel: {
                    margin: 15,//距离
                    interval: 0,
                    rotate: 30,//倾斜度
                    },
                    triggerEvent: true
                } 
            },
            chartData: {},
             data: [],
            activeName: 'first',
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            value: [dayjs(new Date()).subtract(30, 'day').format('YYYY-MM-DD'),dayjs(new Date()).format('YYYY-MM-DD')]
        }
    },
    methods: {
      async change(val) {
          if(!val){
              this.value = []
              this.value[0] = dayjs(new Date()).subtract(30, 'day').format('YYYY-MM-DD')
              this.value[1] = dayjs(new Date()).format('YYYY-MM-DD')
              this.getInstrumentTestTime(this.value) 
             this.getInstructActTime(this.value)
             this.getTestDatas(this.value)
          }else{
             this.getInstrumentTestTime(val) 
             this.getInstructActTime(val)
             this.getTestDatas(val)
          }
      },
      currentChange(val) {
          this.currentPage = val
      },
      async getInstrumentTestTimes() {
          const res = await this.$http.get('/instrument/getInstrumentTestTimes')
          this.gpTestTimes = res.gpTestTimes
          this.ldTestTimes = res.ldTestTimes
          this.fyTestTimes = res.fyTestTimes
          this.tableData = res.partTestInfo
      },
      async getInstrumentTestTime(val) {
          const res = await this.$http.get(`/instrument/getInstrumentTestTimes?startTime=${val[0]}&endTime=${val[1]}`)
              this.gpTestTimes = res.gpTestTimes
              this.ldTestTimes = res.ldTestTimes
              this.fyTestTimes = res.fyTestTimes
              this.tableData = res.partTestInfo
      },
      async getInstructActTimes() {
          const { result } = await this.$http.get('/instrument/getInstructActTimes')
          this.chartData = result
      },
      async getInstructActTime(val) {
          const { result } = await this.$http.get(`/instrument/getInstructActTimes?startTime=${val[0]}&endTime=${val[1]}`)
          this.chartData = result
      },
      async getTestData () {
          const res = await this.$http.get('/instrument/getTestData')
          this.data = res.result
          this.activeName = res.result[0].type
      },
      async getTestDatas (val) {
          const res = await this.$http.get(`/instrument/getTestData?startTime=${val[0]}&endTime=${val[1]}`)
          this.data = res.result
          this.activeName = res.result[0].type
      }
    },
    created() {
        this.getInstrumentTestTime(this.value) 
        this.getInstructActTime(this.value)
        this.getTestDatas(this.value)
    },
    // mounted() {
    //     Bus.$emit('setHeight')
    //     Bus.$emit('getHeight')
    // },
}
</script>

<style lang="scss" scoped>
@import "./EquipmentStatusDetection.scss";
</style>